<?php
$pages =  array(
		array("label"=>"Intro","url" =>"pages/intro.php"),
		array("label"=>"Self Validating Form","url" =>"pages/page1.php"),
		array("label"=>"Advanced JavaScript","url" =>"pages/page2.php"),
		array("label"=>"Youtube video","url" =>"pages/page4.php"),
		array("label"=>"PHP scripts sample","url" =>"pages/page3.php"),
		array("label"=>"Finish","url" =>"pages/submit.php") // you best not remove this, unless you're submitting in a different way.
		
);


$sessionKey=rand (10000000000, 99999999999);
// this is necesary for enchanced security.
session_start();
$_SESSION['domainCheckKey']=$sessionKey;


?>
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="css/bootstrap.min.css">
        <style>
            body {
                padding-top: 50px;
                padding-bottom: 20px;
            }
        </style>
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="css/main.css">
		<link rel="stylesheet"  href="css/zoomify.css" />
		<link rel="stylesheet" href="css/validationEngine.jquery.css" />
		
        <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-collapse collapse">
          <div class="centerWrapper">
			<nav>
				<a id="prev" class="menuArrow arrowLeft"></a>
				<ul id="pageCountContainer">
					<?php
						foreach($pages as $key => $page)
						{
							echo "<li>{$page["label"]}</li>";
						}
					?>
				</ul>
				
				<a id="next" class="menuArrow arrowRight"></a>
			</nav>
		</div>
        </div><!--/.navbar-collapse -->
      </div>
    </div>

	
	
    <!-- Main jumbotron for a primary marketing message or call to action -->
	  
	  <div id="pageContainer">
		
		<?php 
		foreach($pages as $key => $page)
		{
			echo '<section class="page" >';
				ob_start();
				include($page["url"]);
				echo ob_get_clean();
			echo '</section>';
		}
	  ?>
	  
	  </div>
	  
  <!-- Modal -->
  <div class="modal fade" id="validationErrorModal" tabindex="-1" role="dialog" aria-labelledby="Validation error" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Validation error</h4>
        </div>
        <div class="modal-body">
          The current page didn't validate properly. This means that you have to fill out all the mandatory fields before you can continue.
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
  
  
	
	 <!-- Modal -->
  <div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" aria-labelledby="Validation error" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Submitting results</h4>
        </div>
        <div class="modal-body">
			
			<div id="submit_progBar" >
				<div class="progress progress-striped active">
				  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
				  </div>
				</div>
			</div>
			
			<div id="submit_success"  style="display:none">
				<div class="alert alert-success">Well done! You successfully submitted you're data.</div>
			</div>
		
			<div id="submit_fail"  style="display:none">
				<div class="alert alert-danger">Damn it! There was an error while submitting you're data.</div>
			</div>
			
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
	
	
	
	
	
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.js"><\/script>')</script>

        <script src="js/vendor/bootstrap.min.js"></script>
		<script src="js/jquery.easing.1.3.js"></script>	
		
		<script src="js/jQueryValodationEngine/jquery.validationEngine.js"></script>
		<script src="js/jQueryValodationEngine/languages/jquery.validationEngine-en.js"></script>
		
		<script src="js/zoomify.js"></script>
		<script src="js/quizEngine.js"></script>
		
		
		<script>
			(function(){			
				var pages = new SlidingPages($("#pageContainer"));
				var mainMenu = new MainMenu($("nav"), pages);
				
				$("#submitAll").on("click", function(ev){
				
				// display loading signe:
				 var loadingMod= $("#loadingModal").modal({
					backdrop: 'static',
					keyboard: false
				});
				
					mainMenu.submit("writedata.php?key=<?php echo $sessionKey;?>", 
								function(responce){  // the success function
										//		add timeout for somr customer satisfaction:
										setTimeout(function(){
											loadingMod.find("#submit_progBar").hide();
											loadingMod.find("#submit_success").show();
											
										},3000);
								}, 
								function(){ // the fail function:
										setTimeout(function(){
											loadingMod.find("#submit_progBar").hide();
											loadingMod.find("#submit_fail").show();	
										},3000);		
					});
				})
			})();
			
			
		</script>
		
        <script>
            var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
            (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
            g.src='//www.google-analytics.com/ga.js';
            s.parentNode.insertBefore(g,s)}(document,'script'));
        </script>
    </body>
</html>
